<%@ page contentType="text/html; charset=UTF-8" %>
<%@ include file="/jsp/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导购员统计</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctxStatic}/plugins/h+/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/animate.min.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/plugins/h+/css/plugins/webuploader/webuploader.css">
    <link href="${ctxStatic}/plugins/h+/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <style>
        .ml10 {
            margin-left: 15px;
        }

    </style>

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight" id="ccbb">
    <div class="row">
        <div class="col-sm-12">
            <span id="spancc" class="spancc"></span>

            <div class="row">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>搜索条件</h5>

                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-md-2">
                                <input placeholder="开始日期" id="search_startdate" class="form-control layer-date" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})">
                            </div>
                            <div class="col-md-2">
                                <input placeholder="结束日期" id="search_enddate" class="form-control layer-date" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})"></div>
                            <div class="col-md-1">
                                <button id="btn_search" class="btn btn-primary"><i class="fa fa-search"></i>&nbsp;搜索</button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <table id="exampleTablePagination"></table>
        </div>
    </div>
</div>

<script src="${ctxStatic}/plugins/h+/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctxStatic}/plugins/h+/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/bootstrap-table.js"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/locale/bootstrap-table-zh-CN.js"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/extensions/export/bootstrap-table-export.js"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/extensions/editable/bootstrap-table-editable.js"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="${ctxStatic}/plugins/h+/js/content.min.js?v=1.0.0"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/layer/laydate/laydate.js"></script>
<script>

</script>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
<script type="text/javascript">
    //初始化表格对象
    var $table = $('#exampleTablePagination');

    $(function(){
        $("#search_startdate").val('${start_time}');
        $("#search_enddate").val('${end_time}');
    });

    //详情
    function showPopup(ids) {
        if (ids.length < 1) {
            sweetAlert("无法操作！", "请勾选需要删除的信息!", "error");
            return;
        }
        var start_time = $("#search_startdate").val();
        var end_time = $("#search_enddate").val();

        var url = '${pageContext.request.contextPath}/salesOrder/toSalesMX.ac?ids=' + ids + '&start_time=' + start_time + '&end_time=' + end_time;
        //自定页
        parent.layer.open({
            type: 2,
            shift: 4,//动画类型
            moveType: 1,
            maxmin: true,
            shadeClose: true, //开启遮罩关闭
            area: ['700px', '530px'],
            content: url,
            success: function (layero, index) {
            },
            cancel: function (index) {
            },
            close: function (index) {
            }
        });
    }

    ////////////////////////////////////////////////////////////////////////////////////////以下是通过js方式初始化BootStrapTable/////////////////////////////////////////////

    $table.bootstrapTable({
        url: "${pageContext.request.contextPath}/salesOrder/showSalesOrder_MX.ac",
        method: 'post',
        contentType: "application/x-www-form-urlencoded",//必须的
        dataType: "json",
        pageList: [10, 20, 50, 100],//会根据当前的数据量加载合适的pageList
        height: ($(window).height() - 200),
        //cardView:true,//是否自适应手机
        pagination: true, //分页
        // queryParamsType: "limit",
        singleSelect: false,
        cache: false,
        sortName: "createTime",
        search: false, //显示搜索框
        showColumns: false,
        showRefresh: false,
        showToggle: false,
        showPaginationSwitch: false,
        smartDisplay: true,
        detailView: false,
        toolbar: "#toolbar",
        queryParams: queryParams,//参数
        searchOnEnterKey: true,
        detailFormatter: function (index, row, element) {
            return row.notes;
        },
        sidePagination: "server", //服务端处理分页
        columns: [
            {
                visible: false,
                field: 'salesUserCode'
            },
            {
                title: '姓名',
                field: 'salesName',
//                    titleTooltip: '点击可以进行排序操作',
//                    sortStable:true,
                align: 'center'
            },
            {
                title: '订单数量',
                field: 'orderCount',
                align: 'center'
            },
            {
                title: '90券金额',
                field: 'payCoupon',
                align: 'center'
            },
            {
                title: '服务费合计',
                field: 'cash_total',
                align: 'center'
            },
            {
                title: '90贝支付金额',
                field: 'coinPayTotal',
                align: 'center'
            },
            {
                title: '额外支付金额',
                field: 'order_total',
                align: 'center'
            }
        ]
    });

    /*
     搜索按钮
     */
    $("#btn_search").click(function () {
        $table.bootstrapTable('selectPage', 1);
        $table.bootstrapTable('refresh', queryParams);
        //loadChartTJ(datax);
    });

    /*
     传递的参数
     */
    function queryParams(params) {
        var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit: params.limit,  //页面大小
            offset: params.offset, //页码
            pageindex: params.pageNumber,
            start_time: $("#search_startdate").val(),
            end_time: $("#search_enddate").val(),
            ids: '${ids}'
        };
        return temp;
    }
    ///////////////////////////////////////////////////////////////toolbar///////////////////////////////////////


    //详情
    $("#btn_select").click(function () {
        var ids = getSelections();
        //执行批量删除
        showPopup(ids);
    });


    /*
     获取所有选中的CheckBox的主键值 【数组】
     */
    function getSelections() {
        return $.map($table.bootstrapTable('getSelections'), function (row) {
            return row.salesUserCode;
        });
    }

    /*
     BootStrapTable CheckBox 状态初始化
     */
    function stateFormatter(value, row, index) {
        if (row.id === 2) {
            return {
                disabled: true,
                checked: true
            };
        }
        if (row.id === 0) {
            return {
                disabled: true,
                checked: true
            }
        }
        return value;
    }


</script>
</body>


</html>
